<template>
  <!--轮播图-->
  <div class="main-container">
    <el-card class="box-card !border-none" shadow="never">
      <div class="flex justify-between items-center">
        <span class="text-page-title">{{ pageName }}</span>
        <el-button type="primary" @click="addEvent()">{{ t("addBanner") }}</el-button>
      </div>
      <el-card class="box-card !border-none my-[10px] table-search-wrap" shadow="never">
        <el-form :inline="true" :model="bannerData.searchParam" ref="searchFormRef">
          <el-form-item :label="t('status')" prop="status">
            <el-select
              v-model="bannerData.searchParam.status"
              :placeholder="t('statusPlaceholder')"
              clearable
            >
              <el-option :label="t('statusUnlock')" :value="1" />
              <el-option :label="t('lock')" :value="0" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="loadBannerList()">
              {{ t("search") }}
            </el-button>
            <el-button @click="resetForm(searchFormRef)">{{ t("reset") }}</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <div style="margin-top: 20px">
        <el-table :data="bannerData.data" size="large" v-loading="bannerData.loading">
          <template #empty>
            <span>{{ !bannerData.loading ? t("emptyData") : "" }}</span>
          </template>
          <el-table-column label="序号" type="index" width="60" align="center" />
          <el-table-column prop="image" :label="t('image')" min-width="70" align="center">
            <template #default="{ row }">
              <el-image
                v-if="row.image"
                class="w-[70px] h-[70px]"
                :src="img(row.image)"
                fit="contain"
              >
                <template #error>
                  <div class="image-slot">
                    <img
                      class="w-[70px] h-[70px]"
                      src="@/addon/shop_fenxiao/assets/goods_default.png"
                      fit="contain"
                    />
                  </div>
                </template>
              </el-image>
              <img
                v-else
                class="w-[70px] h-[70px]"
                src="@/addon/shop_fenxiao/assets/goods_default.png"
                fit="contain"
              />
            </template>
          </el-table-column>
          <!-- <el-table-column prop="url" :label="t('url')" min-width="100" align="left" /> -->
          <el-table-column :label="t('status')" align="center">
            <template #default="{ row }">
              <el-tag :type="row.status == 1 ? 'success' : 'danger'">
                {{ t(row.status == 1 ? "statusUnlock" : "lock") }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="sort" :label="t('sort')" align="center" />
          <el-table-column :label="t('createTime')" align="center">
            <template #default="{ row }">
              {{ row.create_time || "" }}
            </template>
          </el-table-column>
          <el-table-column
            :label="t('operation')"
            align="center"
            fixed="right"
            width="130"
          >
            <template #default="{ row }">
              <el-button type="primary" link @click="editEvent(row)">
                {{ t("edit") }}
              </el-button>
              <el-button type="primary" link @click="delEvent(row)">
                {{ t("delete") }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <edit-banner ref="editBannerDialog" @complete="loadBannerList()" />
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from "vue";
import { t } from "@/lang";
import { img } from "@/utils/common";
import { getBannerList, deleteBannerApi } from "@/app/api/alcohol";
import { ElMessageBox, ElMessage } from "element-plus";
import type { FormInstance } from "element-plus";
import editBanner from "@/app/views/alcohol/components/edit-banner.vue";
import { useRoute } from "vue-router";

const route = useRoute();
const pageName = route.meta.title;
const bannerData = reactive({
  loading: true,
  searchParam: {
    status: null,
  },
  data: [],
});
const searchFormRef: Record<string, any> | null = ref(null);
const editBannerDialog: Record<string, any> | null = ref(null);

onMounted(() => {
  loadBannerList();
});

/**
 * 获取轮播图列表
 */
const loadBannerList = () => {
  bannerData.loading = true;

  getBannerList(bannerData.searchParam)
    .then((res) => {
      bannerData.data = res.data;
    })
    .finally(() => {
      bannerData.loading = false;
    });
};

/**
 * 编辑轮播图
 * @param data
 */
const editEvent = (data: any) => {
  editBannerDialog.value.setFormData(data);
  editBannerDialog.value.showDialog = true;
};

/**
 * 添加轮播图
 */
const addEvent = () => {
  editBannerDialog.value.setFormData();
  editBannerDialog.value.showDialog = true;
};

/**
 * 删除轮播图
 * @param data
 */
const delEvent = (data: any) => {
  ElMessageBox.confirm(t("confirmDelete"), t("deleteTips"), {
    confirmButtonText: t("confirm"),
    cancelButtonText: t("cancel"),
    type: "warning",
  })
    .then(() => {
      deleteBannerApi(data.id).then(() => {
        loadBannerList();
        ElMessage.success(t("deleteSuccess"));
      });
    })
    .catch(() => {});
};

// 表单重置
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  loadBannerList();
};
</script>

<style lang="scss" scoped></style>
